@use "vars";

@use "../../../../../node_modules/@material/theme" with (
  $primary: vars.$primary,
  $secondary: vars.$secondary,
  $on-primary: vars.$on-primary,
  $on-secondary: vars.$on-secondary,
);

@use "../../../../../node_modules/@material/typography" with (
    $font-family: ("Inter", sans-serif)
);

@import "fonts";
@import "material-components-web/material-components-web";

input:-webkit-autofill::first-line {
  font-size: 17px;
}

$generalPadding: 20px;
$mdcComponentPadding: 16px;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
}

html,
body {
  font-size: 17px;
  font-family: typography.$font-family;
  height: 100%;
  padding: 0;
  margin: 0;
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
}

a.button {
  color: #000;
  text-decoration: none;
}

a {
  color: vars.$secondary;
}

.cloud-login-suggestion {
  padding-top: 40px;
  max-width: 300px;
}

h1,
h2,
h3 {
  font-weight: 400;
}

.push-down {
  margin-bottom: $generalPadding;
}
.push-up {
  margin-top: $generalPadding;
}
.push-left {
  margin-left: $generalPadding;
}
.push-right {
  margin-right: $generalPadding;
}

.error {
  color: red;
}

.edit-users-form {
  padding: $generalPadding;

  .delete-user-form {
    > span {
      display: inline-block;
      margin-right: $generalPadding;
    }
  }

  h2 {
    margin-bottom: $generalPadding;
  }

  .group {
    margin-bottom: $generalPadding;
  }

  .mdc-text-field {
    margin-bottom: $generalPadding;
  }
}

.login-form {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;

  img.logo {
    width: 100%;
    max-width: 200px;
    margin-bottom: $generalPadding;
  }

  .box {
    padding: $generalPadding * 2;
    box-shadow: 0 2px 12px -1px rgba(0, 0, 0, 0.15);
    display: inline-block;
    text-align: center;
    border-radius: 6px;

    .mdc-text-field {
      margin-bottom: $generalPadding;
    }

    h2 {
      margin: $generalPadding 0;
    }
  }
}
